<script setup>
import { ref,reactive } from 'vue';

//定义变量---商品库存数组
const goods = reactive([{ 'id': '001', 'name': 'iphone16', 'price': 6888.88, 'stock': 10 }, 
{ 'id': '002', 'name': 'iphone15', 'price': 5888.88, 'stock': 10 },
{ 'id': '003', 'name': 'iphone14', 'price': 4888.88, 'stock': 10 },
{ 'id': '004', 'name': 'iphone13', 'price': 3888.88, 'stock': 10 },
]);
//定义变量---购物车商品数组:
//{ 'id': '001', 'name': 'iphone16', 'price': 6888, 'count': 1,'total':6888 }
const myGoods=reactive([])
//定义变量---总计金额
const money=ref(0)
//定义变量---是否显示增加商品的表单
const isShowAdd=ref(false)
//定义变量---表单中输入的商品信息存放变量
const addGoods=reactive({})
//定义变量---是否显示购物车
const isShowCart=ref(false)

function loadGoods(){//根据id自动加载其他信息
  //根据输入id到goods中查找该商品  
  for(let i=0;i<goods.length;i++){
    let g=goods[i]
    if(g.id==addGoods.id){
      addGoods.name=g.name
      addGoods.price=g.price
      addGoods.stock=g.stock
      addGoods.placeholder="最大购买量为"+g.stock
      addGoods.count=1
      break
    }
  } 
}

function add(){//往购物车添加商品,本质上就是往购物车清单数组中添加元素
  isShowAdd.value=false //消失表单
  isShowCart.value=true//显示购物车清单表格
  addGoods.total=addGoods.count*addGoods.price
  //将当前商品添加进购物车数组时，先检查这个商品addGoods.id是否已经在购物车中存在
  let tag=false
  myGoods.forEach(g => {
    if(g.id==addGoods.id){//已经在购物车中存在
      g.count++
      tag=true
    }
  });
  if(tag==false){
    myGoods.push(JSON.parse(JSON.stringify(addGoods))) //采用深复制添加到购物车数组中
  }
  
  calMoney()  
}

function calMoney(){
  //计算支付金额
  money.value=0
  myGoods.forEach(g => {
    money.value=money.value+g.total
    Math.round(money.value * 100) / 100
  })
}

function changeCount(g,index){//修改购物车清单表格中某行的数量时执行
  if(g.count>g.stock) g.count=g.stock
  if(g.count<=0) {
    g.count=0
    myGoods.splice(index,1)
  }
  if(myGoods.length==0) isShowCart.value=false
  g.total=g.price*g.count
  Math.round(g.total * 100) / 100
  calMoney()

}
</script>

<template>
<h2>vue.js版购物车</h2>
<button @click="isShowAdd=true">增加商品</button>
<div v-if="isShowAdd">
  <form action="">
    商品编号：<input type="text"  @blur="loadGoods" v-model="addGoods.id"/><br/>
    商品名称：<input type="text" v-model="addGoods.name" readonly/><br/>
    商品价格：<input type="text" v-model="addGoods.price" readonly/><br/>
    购买数量：<input type="number" min="0" :max="addGoods.stock" v-model="addGoods.count" :placeholder="addGoods.placeholder"/><br/>
    <button @click="add">添加进购物车</button>
  </form>
</div>
<div v-if="!isShowCart">您的购物车空空如也！！</div>
<table v-else>
<thead>
  <tr>
    <td>商品编号</td>
    <td>商品商品</td>
    <td>商品价格</td>
    <td>商品数量</td>
    <td>商品小计</td>
  </tr>
</thead>
<tbody>
  <tr v-for="(g,i) in myGoods" :key="i">
    <td>{{g.id}}</td>
    <td>{{g.name}}</td>
    <td>{{g.price}}</td>
    <td><input type="number" min="0" :max="g.stock" v-model="g.count" @input="changeCount(g,i)"/></td>
    <td>{{g.total}}</td>
  </tr>
</tbody>
  您需要支付的金额为：{{ money }}
  
</table>
</template>

<style scoped></style>
